<template>
    <div>
        <!-- <h1>{{ number }}</h1>
        <h2>{{ num1 }} <button @click="num1++">num1自增</button></h2>
        
        <h2>{{ num2 }} <button @click="num2++">num2自增</button></h2>

        <hr>
        <Test></Test> -->
        <WatchEffect></WatchEffect>

    </div>
</template>


<script setup>
import  WatchEffect  from './components/WatchEffect.vue';
// import { watch, ref, reactive } from 'vue';
// import Test from './components/Test.vue'
// //watch：侦听源，回调函数（New，Old），配置项
// const num1 = ref(10)
// const num2 = ref(15)
// const number = ref(25)

// // watch(num1,(newVal,oldVal)=>{
// //     console.log(newVal,oldVal);
// //     number.value=newVal+num2.value
// // },{immediate:true})
// // watch(num2,(newVal,oldVal)=>{
// //     number.value=newVal+num1.value
// // },{immediate:true})

// watch([num1,num2],(newVal,oldVal)=>{
//     console.log(newVal);
//     number.value=newVal[0]+newVal[1]
// })




</script>



<style scoped></style>